<template>
    <a-card :title="title">
        <div :id="id" :style="styleObject" :width="width" :height="height"></div>
    </a-card>
</template>
  
<script>
import { computed, defineComponent, toRefs } from "vue";
export default defineComponent({
    name: "CardEcharts",
    props: {
        title: {
            type: String,
            defalut: "",
        },
        width: {
            type: [String, Number],
            default: "100px",
        },
        height: {
            type: [String, Number],
            default: "100px",
        },
        id: {
            type: String,
            required: true,
        },
        option: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        const styleObject = computed(() => {
            return {
                width: props.width,
                height: props.height,
            };
        });

        return {
            ...toRefs(props),
            styleObject,
        };
    },
});
</script>

<style>
</style>